<template>
  <div>
    <section class="filter">
      <div class="filter-container">
        <el-form ref="form" :inline="true" size="medium">
          <el-form-item label="审核状态：">
            <el-radio-group v-model="listQuery.status" @change="resetPage">
              <el-radio v-for="(item, index) in statusList" :key="index" :label="item.label">{{ item.value }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
    </section>

    <section class="result">
      <el-table v-if="list.length" :data="list" :header-cell-style="{ textAlign: 'center', fontWeight: '600' }"
        :cell-style="{ textAlign: 'center' }" highlight-current-row>
        <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column label="姓名">
          <template slot-scope="scope">
            <span>{{ scope.row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column label="个性签名">
          <template slot-scope="scope">
            <span>{{ scope.row.signature }}</span>
          </template>
        </el-table-column>
        <el-table-column label="个人简介">
          <template slot-scope="scope">
            <span>{{ scope.row.introduction }}</span>
          </template>
        </el-table-column>
        <el-table-column label="性别">
          <template slot-scope="scope">
            <span>{{ scope.row.sex ? "男":"女" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="小红书号">
          <template slot-scope="scope">
            <span>{{ scope.row.bookiPhone }}</span>
          </template>
        </el-table-column>

        <el-table-column label="账号状态">
          <template slot-scope="scope">
            <!-- <span>{{ statusList.find(item => { return scope.row.status === item.label }).value }}</span> -->
            <span>{{ scope.row.status == 1 ? "启用":"禁用" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" class="el-button--success-text" @click="editChannel(scope.row)">编辑</el-button>
            <!-- <el-button type="text" class="el-button--success-text" @click="operateForView(scope.row)">查看</el-button> -->
            <el-button type="text" class="el-button--primary-text" :disabled="scope.row.status !== 1 ? true : false"
              @click="operateForPass(scope.row.userId)">禁用</el-button>
            <el-button type="text" class="el-button--danger-text" :disabled="scope.row.status !== 0 ? true : false"
              @click="operateForFail(scope.row.userId)">启用</el-button>
          </template>
        </el-table-column>
      </el-table>
      <empty-data v-else />
    </section>

    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.size"
      @pagination="getList" />

      <channel-edit-dialog :dialogVisible.sync="editDialogVisible" :channel="channel" @refreshList="getList" />
  </div>
</template>

<script>
import Pagination from '@/components/pagination'
import EmptyData from '@/components/empty-data'
import { findAuthList, authPass, authFail } from '@/api/user-auth'
import ChannelEditDialog from './components/channel-edit-dialog'
import myMixin from '@/utils/mixins'

export default {
  name: 'AuthManage',
  mixins: [myMixin],
  components: {
    Pagination,
    EmptyData,
    ChannelEditDialog
  },
  data() {
    return {
      listQuery: {
        status: undefined,
        page: 1,
        size: 10
      },
      total: 0,
      host: '',
      statusList: [
        { label: undefined, value: '全部' },
        { label: 0, value: '已被封禁的账号' },
        { label: 1, value: '启用的账号' }
        // { label: 2, value: '审核失败' },
        // { label: 9, value: '审核通过' }
      ],
      list: [],
      channel: {},
      // 对话框相关
      editDialogVisible: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await findAuthList(this.listQuery)
      console.log(res)
      if (res.code === 200) {
        this.list = res.data
        // this.host = res.host
        this.total = res.total
      } else {
        this.$message({ type: 'error', message: res.errorMessage })
      }
    },
    // 重置分页page
    resetPage() {
      this.listQuery.page = 1
      this.getList()
    },
    // 编辑数据
    editChannel: function (channel) {
      console.log(this.channel)
      this.editDialogVisible = true
      this.channel = channel
    },
    operateForView(row) {
      // debugger
      // console.log(this.$router)
      this.$router.push({
        path: '/user-auth/detail',
        query: {
          userId: row.userId,
          name: row.name,
          idno: row.idno,
          fontImage: row.fontImage,
          backImage: row.backImage,
          holdImage: row.holdImage,
          liveImage: row.liveImage,
          status: row.status,
          reason: row.reason
          // host: this.host
        }
      })
    },
    async operateForPass(userId) {
      try {
        const result = await this.showPrompt()

        const { code, errorMessage } = await authFail({ userId: userId, msg: result.value })
        if (code === 200) {
          this.getList()
          this.$message({ type: 'success', message: '操作成功！' })
        } else {
          this.$message({ type: 'error', message: errorMessage })
        }
      } catch (err) {
        this.$message({ type: 'info', message: '已取消封禁' })
      }
    },
    async operateForFail(userId) {
      const { code, errorMessage } = await authPass({ userId: userId })
      if (code === 200) {
        this.getList()
        this.$message({ type: 'success', message: '操作成功' })
      } else {
        this.$message({ type: 'error', message: errorMessage })
      }
    }
  }
}
</script>

<style scoped>
.el-button--has-icon {
  min-width: 90px;
}

.el-button--primary-text {
  height: 36px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 36px;
  border: none;
}
</style>
